<template>
    <div class="searchResult" v-if="showPage">
      <div class="search">
        <i class="iconfont iconsousuo"></i>
        <input type="text" :focus="isFocus" confirm-type="search" @confirm="searchBtn">
      </div>
      <comment :Posts="Posts"></comment>
      <bottoms></bottoms>
    </div>
</template>

<script>
  import comment from "@/components/comment/index"
  import bottoms from '@/components/reachBottom/index'
    export default {
        name: "searchResult",
      components:{
        comment,
        bottoms
      },
      data(){
          return{
            id: "",
            value:"",
            data: "",
            showPage: true,
            Posts:[],
            loadingEnd:{
              moduleOne: false,
            },
            totalPage: 1,
            currentPage: 1,
            isFocus:false,
          }
      },
      methods:{
        searchBtn(e){
          this.value = e.mp.detail.value.replace(/\s+/g,"");
          this.viewLoad();
        },
        gethotGroup(){
          this.$ajax
            .post(this.$api.postsList,{
              page_size: 10,
              page: this.currentPage,
              group_id:this.id,
              data:this.value
            })
            .then(res => {
              this.loadingEnd.moduleOne = true;
              this.Posts.push(...res.data);
              this.totalPage = res.total_page;
              if(res.total_count === 0){
                this.$store.dispatch("changeIsEmpty", true);
              } else {
                this.$store.dispatch("changeIsEmpty", false);
              }
            })
            .catch(err => {
              this.loadingEnd.moduleOne = true;
              ﻿uni.showToast({
                title: err,
                icon: 'none',
                duration: 2000
              })
            });
        },
        viewLoad(){
          this.currentPage = 1;
          this.Posts= [];
          this.loadingEnd.moduleOne = false;
          this.$store.dispatch("changeIsMore", false);
          this.$store.dispatch("changeIsEnd", false);
          this.$store.dispatch("changeIsEmpty", false);
          ﻿uni.showLoading({
            title: '加载中',
            mask: true
          });
          this.gethotGroup();
        }
      },
      onPullDownRefresh(){
        this.viewLoad();
        ﻿uni.stopPullDownRefresh() //停止下拉刷新
      },
      onReachBottom(){
        if(this.totalPage > this.currentPage){
          this.$store.dispatch("changeIsMore", true);
          this.$store.dispatch("changeIsEnd", false);
          this.currentPage++;
          this.gethotGroup();
        } else {
          this.$store.dispatch("changeIsEnd", true);
          this.$store.dispatch("changeIsMore", false);
        }
      },
      computed:{
        hideLoading(){
          if(this.loadingEnd.moduleOne){
            setTimeout(function(){
              ﻿uni.hideLoading()
            }, 800)
          }
        }
      },
      onLoad(res){
        this.id = res.id;
      },
      onHide(){
        this.showPage= false;
      },
      onShow(){
        this.showPage= true;
        this.$store.dispatch("changeIsMore", false);
        this.$store.dispatch("changeIsEnd", false);
        this.$store.dispatch("changeIsEmpty", false);
        this.currentPage = 1;
        this.value = "";
        this.Posts = [];
        this.isFocus = true;
        this.viewLoad();
      },
    }
</script>

<style scoped>
.searchResult{
  padding: 10rpx 30rpx;
}
.search{
  display: flex;
  align-items: center;
  position: relative;
}
.search>i{
  position: absolute;
  left: 30rpx;
  color: #9A9A9A;
}
.search>input{
  width: 100%;
  height: 63rpx;
  background-color: #F6F6F6;
  border-radius: 32rpx;
  padding: 0 30rpx 0 80rpx;
  box-sizing: border-box;
}
</style>
